<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
</head>

<body>
  <div id="app">
    <home-page></home-page>
  </div>
  <script src="./vue.global.js"></script>
  <script src="./axios.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
  <script>
    // https://api.it120.cc/conner
    const { createApp } = Vue;
    const app = createApp();
    const HomePage = {
      template: `
        <div>
          <h2>这是首页</h2>
          <div class="swiper banner">
            <div class="swiper-wrapper">
              <div v-for="img in imgUrl" :key="img" class="swiper-slide">
                <img :src="img" width="500"/>  
              </div>
            </div>
          </div>
        </div>
      `,
      data() {
        return {
          imgUrl: [
            'https://img13.360buyimg.com/babel/s1180x940_jfs/t1/112216/32/30392/128992/63ac2cc6Fe48bc12a/74d65853f24a0c44.png',
            'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000368/33059449809/FocusFullshop/CkJqZnMvdDEvNzc5NDkvMzIvMTkxMjUvODAwODEvNjI5MjRkZjBFZDNiODVkYTAvY2FlYTJjYTdiOWJhNDcxMS5qcGcSCjk5OS10eV8wXzEwATjwi3pY0df8k3s/cr/s/q.jpg',
            'https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e4/8a27e744/cr/s/q.jpg'
          ],
          swiper: null
        }
      },
      methods: {
        // 初始化swiper
        initSwiper() {
          this.swiper = new Swiper('.banner', {
            autoplay: true,//可选选项，自动滑动
          })
        }
      },
      created() {
        // this.initSwiper();
      },
      mounted(){
        this.initSwiper();
      }
    }
    app.component('HomePage', HomePage)

    app.mount('#app')

  </script>
</body>

</html>